<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>相对定位</title>

        <style type="text/css">
            /* 选择器分组 或 选择器列表 ( 多个选择器使用逗号隔开，建议每行写一个选择器 )*/
            h3 , 
            p { text-align: center ; }

            p>span { color: red ; font-weight: bolder ; }

            .outer { border: 5px dotted blue ; width: 500px ; height: 400px ; margin: auto ; }

            .inner { 
                background: rgba( 200 , 200 , 0 , 0.5 );
                width: 200px ; 
                height: 200px ; 
                position: relative ; /* 采用相对定位来确定元素位置 */
                /* left: 50px ; /* 在自己正常位置基础上向右移动 */
                right: 50px ; /* 在自己正常位置基础上向左移动 */
                /* top: 100px ; /* 在自己正常位置基础上向下移动 */
                bottom: 100px ; /* 在自己正常位置基础上向上移动 */
            }

        </style>

    </head>
    <body>

        <h3>测试相对定位</h3>
        <p>
            position: relative 表示生成相对定位的元素，相对于<b>其正常位置</b>进行定位。
            <br>
            这里为了能够明确元素的<b>其正常位置</b>所以才为 .inner 元素添加了外部的 .outer 父元素
            <br>
            <span>注意，这里的 position:relative 绝对不是相对于父元素定位。</span>
        </p>
        <div class="outer">
            <div class="inner"></div>
        </div>
        
    </body>
</html>